<template>
	<div class="content-container page-group-tags">
		<div style="display:flex;justify-content:space-between;margin-top: 15px;">
			<div style="font-size: 24px;">用户标签</div>
			<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="addUserTags">创建标签</el-button>
			</el-col>
		</div>

		<el-form class="content-query" :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
			<el-form-item label="运行状态" prop="status">
				<el-select v-model="queryParams.status" placeholder="请选择运行状态" clearable size="small">
					<el-option label="不限" value="" />
					<el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel"
						:value="dict.dictValue" />
				</el-select>
			</el-form-item>
			<el-form-item label="创建方式" prop="buildType">
				<el-select v-model="queryParams.buildType" placeholder="请选择创建方式" clearable size="small">
					<el-option label="不限" value="" />
					<el-option v-for="dict in buildTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
						:value="dict.dictValue" />
				</el-select>
			</el-form-item>
			<el-form-item label="更新方式" prop="updateType">
				<el-select v-model="queryParams.updateType" placeholder="请选择更新方式" clearable size="small">
					<el-option label="不限" value="" />
					<el-option v-for="dict in updateTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
						:value="dict.dictValue" />
				</el-select>
			</el-form-item>
			<el-form-item label="计算状态" prop="lastCalcStatus">
				<el-select v-model="queryParams.lastCalcStatus" placeholder="请选择最后计算状态" clearable size="small">
					<el-option label="不限" value="" />
					<el-option v-for="dict in lastCalcStatusOptions" :key="dict.dictValue" :label="dict.dictLabel"
						:value="dict.dictValue" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
			</el-form-item>
			<!-- <el-form-item style="float:left;">
				<el-button type="success" icon="el-icon-plus" size="mini" @click="addUserTags">创建标签</el-button>
			</el-form-item> -->
		</el-form>
		<el-row :gutter="10">
			<el-col :span="6" class="content-left">
				<el-input placeholder="搜索标签" prefix-icon="el-icon-search" v-model="queryParams.displayName">
				</el-input>
				<div>
					<div class="index__profile-item___2Ep7n">
						<div>
							<!-- <el-tree icon-class='el-icon-folder' :data="tagsParentOptions.children" lazy -->
							<el-tree icon-class='el-icon-caret-right' :data="tagsParentOptions.children" lazy
								:props="props" node-key="id" @node-expand="handleNodeClick"
								@node-click="handleTagNodeClick"></el-tree>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="18" class="content-right">
				<div class="index__content___3xrWj">
					<div class="index__model_tags___1-PXC">
						<div class="run-head">
							<span class="rulter__right"><i class="el-icon-arrow-right"></i></span> 正在运行
						</div>
						<!--            <div class="index-count-line">-->
						<!--              <router-link :to="'/group/userDetail?id=' + currentTagsInfo.name" class="panel-head" >-->
						<!--                <div class="index-count-block">-->
						<!--                  <div class="index-count-content">-->
						<!--                    <div class="index-content">{{currentTagsInfo.resultNum}} </div>-->
						<!--                    <div class="index-person-num">人</div>-->
						<!--                    <div class="index__count___u8gSA">-->
						<!--                      <div><span class="index__succeed___3Mrp1"></span></div>-->
						<!--                    </div>-->
						<!--                    <span class="index__finish___2-j5s">{{currentTagsInfo.createTime}}</span>-->
						<!--                    <i class="el-icon-arrow-right"></i>-->
						<!--                  </div>-->
						<!--                </div>-->
						<!--              </router-link>-->
						<!--            </div>-->
						<div class="index__title___3y483">
							<span>{{ currentTagsInfo.displayName }}</span>
						</div>
						<div class="index__editable___1GyWU">
							<el-input placeholder="请输入备注"></el-input>
						</div>
						<div class="index__3eMlg" @click="shwoTagsRuleFun">
							<span>通过自定义的规则，将用户划分为
								{{ currentTagsInfo.tagsLevelList ? currentTagsInfo.tagsLevelList.length : 0 }} 个分层，分别为
								<strong>{{ currentTagsInfo.tagsDescription }}</strong></span>
							<span class="rulter__right"><i class="el-icon-arrow-right"></i></span>
						</div>
					</div>
					<div class="index__all_tags___3HoCH">
						<template>
							<el-tabs v-model="activeName">
								<el-tab-pane label="标签人数分布" name="first">
									<event-v-bar-chart :chart-data="chartData"  :chart-title="chartTitle" 
										:style="{ width: '100%', height: '350px' }" />
								</el-tab-pane>
								<el-tab-pane label="标签历史详情" name="second">
									<event-bar-chart :chart-data="chartData" :chart-title="chartTitle"
										:style="{ width: '800px', height: '250px' }" />
									<el-table v-loading="loading" :data="tableData">
										<el-table-column label="计算基准时间" align="center" prop="resultTime" sortable>
										</el-table-column>
										<el-table-column label="标签人数" align="center" prop="resultNum" sortable>
											<template slot-scope="scope">
												<router-link
													v-bind:to="'/group/userDetail?detailType=TAG&id=' + scope.row.tagsId"
													class="linkId">{{ scope.row.resultNum }}</router-link>
											</template>
										</el-table-column>
										<el-table-column label="计算详情" align="center" prop="buildType">
											<template slot-scope="scope">
												{{ scope.row.taskDateStatus }} &nbsp; {{ scope.row.doTaskTime }}
											</template>
										</el-table-column>
										<el-table-column label="操作" align="center"
											class-name="small-padding fixed-width">
											<template slot-scope="scope">
												<el-button size="mini" type="text" icon="el-icon-refresh"
													@click="handleUpdate(scope.row)" v-hasPermi="['base:group:edit']">
												</el-button>
												<el-button size="mini" type="text" icon="el-icon-download"
													@click="handleDelete(scope.row)" v-hasPermi="['base:group:remove']">
												</el-button>
											</template>
										</el-table-column>
									</el-table>

									<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
										:limit.sync="queryParams.pageSize" @pagination="getUserTagsChart" />
								</el-tab-pane>
							</el-tabs>
						</template>
					</div>
				</div>
			</el-col>
		</el-row>

		<!-- 添加或修改用户标签对话框 -->
		<el-dialog title="通过哪种方式进行标签的创建？" :visible.sync="open" width="740px" v-if="open" :close-on-click-modal="false"
			append-to-body>
			<el-tabs v-model="activeName" style="height:450px">
				<el-tab-pane label="规则创建" name="first">
					<el-row>
						<el-col :span="12" class="tag-class">
							<div class="index__item___1dPAz" @click="createUserTags('01')"><img width="56"
									src="">
								<div class="index__text___o9aob">
									<h4>自定义标签值</h4>
									<p>自定义每个标签值的名称以及计算规则，将人群划分为多个分层</p>
								</div>
							</div>
						</el-col>
						<el-col :span="12" class="tag-class">
							<div class="index__item___1dPAz" @click="createUserTags('02')"><img width="56"
									src="">
								<div class="index__text___o9aob">
									<h4>基础指标值</h4>
									<p>将用户完成事件的次数等指标的计算结果作为标签值</p>
								</div>
							</div>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12" class="tag-class">
							<div class="index__item___1dPAz" @click="createUserTags('03')"><img width="56"
									src="">
								<div class="index__text___o9aob">
									<h4>首次末次特征</h4>
									<p>将用户首次或末次完成事件的时间、距离今日的天数或事件的属性作为标签值</p>
								</div>
							</div>
						</el-col>
						<el-col :span="12" class="tag-class">
							<div class="index__item___1dPAz" @click="createUserTags('04')"><img width="56"
									src="">
								<div class="index__text___o9aob">
									<h4>事件偏好属性</h4>
									<p>将用户完成事件按照某个属性进行分组排序，使用排名前几个的分组作为标签值</p>
								</div>
							</div>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12" class="tag-class">
							<div class="index__item___1dPAz" @click="createUserTags('05')"><img width="56"
									src="">
								<div class="index__text___o9aob">
									<h4>行为分布结果</h4>
									<p>将用户完成事件在指定时间段内分布的天数或小时数作为标签值</p>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="SQL创建" name="second">
					<el-row>
						<el-col :span="12" class="tag-class">
							<div class="index__item___1dPAz" @click="createUserTags('06')"><img width="56"
									src="">
								<div class="index__text___o9aob">
									<h4>SQL 计算结果</h4>
									<p>使用返回的 SQL 计算结果作为标签值，为用户进行标记</p>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="导入创建" name="third">
					<el-row>
						<el-col :span="12" class="tag-class">
							<div class="index__item___1dPAz" @click="createUserTags('07')"><img width="56"
									src="">
								<div class="index__text___o9aob">
									<h4>导入创建</h4>
									<p>使用上传文件计算结果作为标签值，为用户进行标记</p>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-tab-pane>
			</el-tabs>
		</el-dialog>

		<el-drawer title="创建用户标签" :visible.sync="drawer" direction="rtl" size="60%" custom-class='el-drawer-mode'
			:wrapperClosable="true" :before-close="handleClose">
			<el-main style="overflow-y: auto;">
				<el-steps class="el-steps-mode-page-usertag" :active="active" process-status='finish'
					finish-status="finish" :space="200" :align-center="true">
					<el-step title="基础信息"></el-step>
					<el-step title="标签信息"></el-step>
				</el-steps>
				<el-form ref="form" :model="form" :rules="rules" label-width="120px" style="padding:10px;">
					<el-card class="box-card" v-show="active === 0">
						<el-form-item label="标签显示名" prop="displayName">
							<el-input v-model="form.displayName" placeholder="请输入标签显示名称" :disabled="tagsEditable" />
						</el-form-item>
						<el-form-item label="分类" prop="tagType">
							<treeselect v-model="form.tagType" :options="tagsTypeOptions.children" :show-count="true"
								:disabled="tagsEditable" placeholder="请选择标签分类" />
						</el-form-item>

						<el-form-item label="更新方式">
							<el-radio-group v-model="form.updateType" :disabled="tagsEditable">
								<el-radio v-for="dict in updateTypeOptions" :key="dict.dictValue"
									:label="dict.dictValue" border>{{ dict.dictLabel }}
								</el-radio>
							</el-radio-group>
							<div v-show="form.updateType === '01' && !tagsEditable" style="margin-top:10px">
								按
								<el-select v-model="form.taskType" placeholder="请选择执行类型" style="width:100px">
									<el-option label="天" value="day"></el-option>
								</el-select>
								计算 标签每日凌晨更新
							</div>
							<div v-show="form.updateType === '02'" style="margin-top:10px">
								标签生成后，点击“更新”进行数据的更新
							</div>
						</el-form-item>
						<el-form-item label="备注" prop="remark">
							<el-input v-model="form.remark" placeholder="请输入备注" type="textarea"
								:disabled="tagsEditable" />
						</el-form-item>
					</el-card>
					<el-card class="box-card" v-show="active === 1">
						<div slot="header" class="clearfix">
							<span>在全部用户中，将满足以下条件的用户保存为用户标签</span>
						</div>
						<div class="rule-name-container">
							<span :data-id="index"
								:class="index === currentTagsLevel ? 'name-item active' : 'name-item'"
								@click="tagsLevelChangeFun(index)" :title="level.levelName"
								v-for="(level, index) in form.tagsLevelList">{{ level.levelName }}</span>
							<span class="name-item add-value-btn" @click="addUserTagsLevelFun"
								v-show="!tagsEditable"><span><i class="el-icon-plus"></i> 添加</span></span>
						</div>
						<el-form-item label="" prop="displayName" label-width="0">
							<el-input v-model="form.tagsLevelList[currentTagsLevel].levelName" :disabled="tagsEditable"
								placeholder="请输入标签名称" />
						</el-form-item>
						<el-form-item label="" prop="remark" label-width="0">
							<el-input v-model="form.tagsLevelList[currentTagsLevel].levelDescription"
								:disabled="tagsEditable" placeholder="可输入分层备注" type="textarea" />
						</el-form-item>


						<div class="user-filter">
							<div class="contentLine" :style="{ height: globalHeight, left: 0, top: 0 }">
								<span @click="globalChangeExpressionFun">{{ form.globalStr }}</span>
							</div>

							<div class="itemContent" id="rowContentProperties">
								<div class="content-header"><i class="el-icon-plus"></i>用户属性满足
									<el-link type="primary" :underline="false"
										style="padding-left:20px;float:right;display: inline-block;"
										@click="addUserAttribute" v-show="!tagsEditable">
										<i class="el-icon-plus"></i> <span class="innerContent">筛选</span>
									</el-link>
								</div>

								<div>
									<div class="contentLine" :style="{ height: height }"
										v-show="form.tagsLevelList[currentTagsLevel].userAttributes.length > 1">
										<span @click="changeExpressionFun">{{ form.attributeStr }}</span>
									</div>
									<div class="contentProperties" id="divContentProperties">
										<el-row v-show="form.tagsLevelList[currentTagsLevel].userAttributes.length > 0">
											<el-form-item label="" style="display: block;padding-left:10px;"
												label-width="0px">
												<div style="margin-top: 10px;"
													v-for="(v, index) in form.tagsLevelList[currentTagsLevel].userAttributes">
													<el-select
														v-model="form.tagsLevelList[currentTagsLevel].userAttributes[index].attributeName"
														style="width:120px" class="line-item"
														@change="userAttributeChangeFun(form.tagsLevelList[currentTagsLevel].userAttributes, index)">
														<el-option v-for="dict in userAttributeOptions"
															:key="dict.attributeName" :label="dict.attributeRemark"
															:value="dict.attributeName" />
													</el-select>
													<el-select
														v-model="form.tagsLevelList[currentTagsLevel].userAttributes[index].valueExpression"
														style="width:120px" class="line-item"
														@change="eventPropertyChange(form.tagsLevelList[currentTagsLevel].userAttributes[index], index)">
														<el-option v-for="dict in userPropertysOptions"
															:key="dict.eventItemCode" :label="dict.eventItemExpression"
															:value="dict.eventItemCode" />
													</el-select>
													<el-input
														v-model="form.tagsLevelList[currentTagsLevel].userAttributes[index].value1Str"
														type="text" controls-position="right" style="width:100px"
														class="line-item"
														v-show="form.tagsLevelList[currentTagsLevel].userAttributes[index].valueExpression != 'between'">
													</el-input>
													<span
														v-show="form.tagsLevelList[currentTagsLevel].userAttributes[index].valueExpression == 'between'">
														<el-input
															v-model="form.tagsLevelList[currentTagsLevel].userAttributes[index].value1Str"
															type="text" controls-position="right" style="width:90px">
														</el-input>与
														<el-input
															v-model="form.tagsLevelList[currentTagsLevel].userAttributes[index].value2Str"
															type="text" controls-position="right" style="width:90px">
														</el-input>之间
													</span>
													<el-link type="primary" :underline="false"
														style="padding-left:20px;font-size:18px"
														@click="removeRule(form.tagsLevelList[currentTagsLevel].userAttributes, index)">
														<i class="el-icon-remove"></i>
													</el-link>
												</div>
											</el-form-item>
										</el-row>
									</div>
								</div>
							</div>

							<div class="itemContent">
								<div class="content-header"><i class="el-icon-plus"></i>用户行为满足
									<el-link type="primary" :underline="false"
										style="padding-left:20px;float:right;display: inline-block;"
										v-show="!tagsEditable" @click="addUserActions">
										<i class="el-icon-plus"></i> <span class="innerContent">筛选</span>
									</el-link>
								</div>
								<div class="contentLine" :style="{ height: actionHeight }"
									v-show="form.tagsLevelList[currentTagsLevel].userActions.length > 1">
									<span @click="changeActionExpressionFun">{{ form.actionStr }}</span>
								</div>
								<div class="contentProperties" id="divContentActions">
									<el-row v-show="form.tagsLevelList[currentTagsLevel].userActions.length > 0">
										<el-form-item label="" style="display: block;padding-left:10px;"
											label-width="0px">
											<div style="margin-top: 10px;"
												v-for="(v, index) in form.tagsLevelList[currentTagsLevel].userActions">
												<span class="indexButton">{{ indexOptions[index] }}</span>
												<el-date-picker
													v-model="form.tagsLevelList[currentTagsLevel].userActions[index].dataRange"
													size="small" style="width: 240px" value-format="yyyy-MM-dd"
													type="daterange" range-separator="-" class="line-item"
													:picker-options="pickerOptions" start-placeholder="开始日期"
													end-placeholder="结束日期"></el-date-picker>
												<el-select class="line-item" size="small"
													v-model="form.tagsLevelList[currentTagsLevel].userActions[index].doThings"
													style="width:120px"
													@change="eventPropertyChange(form.tagsLevelList[currentTagsLevel].userActions[index], index)">
													<el-option label="做过" value="do" />
													<el-option label="未做过" value="undo" />
												</el-select>
												<el-select class="line-item" size="small"
													v-model="form.tagsLevelList[currentTagsLevel].userActions[index].eventType"
													style="width:120px" @change="eventTypeChange(funnelRuleType, index)"
													value-key="id">
													<el-option v-for="dict in eventTypeOptions" :key="dict.id"
														:label="dict.eventTypeName" :value="dict" />
												</el-select>
												<el-link type="primary" :underline="false" style="padding-left:20px;"
													v-show="!tagsEditable"
													@click="addActionEventItem(form.tagsLevelList[currentTagsLevel].userActions[index].eventItems, index)">
													<i class="el-icon-plus"></i>添加筛选
												</el-link>
												<el-link type="primary" :underline="false" v-show="!tagsEditable"
													style="padding-left:20px;font-size:18px"
													@click="removeActionRule(form.tagsLevelList[currentTagsLevel].userActions, index)">
													<i class="el-icon-remove"></i>
												</el-link>
												<el-row class="el-row-mode" style="margin-top: 6px;"
													v-for="(item, itemIndex) in form.tagsLevelList[currentTagsLevel].userActions[index].eventItems">
													<el-select v-model="item.eventItem" class="line-item" size="small"
														style="width:120px" value-key="id">
														<el-option
															v-for="dict in allEventItemListOpts[form.tagsLevelList[currentTagsLevel].userActions[index].eventType.id]"
															:key="dict.id" :label="dict.eventItemName" :value="dict" />
													</el-select>
													<el-select v-model="item.eventItemExpression" style="width:120px"
														size="small"
														@change="eventPropertyChange(funnelRuleType[index], index)">
														<el-option
															v-for="dict in eventPropertysOptions[item.eventItem.valueType]"
															:key="dict.eventItemCode" :label="dict.eventItemExpression"
															:value="dict.eventItemCode" />
													</el-select>
													<el-input v-model="item.value1Str" class="line-item" type="text"
														controls-position="right" style="width:100px" size="small"
														v-show="ruleTypes3Flag == 1"></el-input>
													<span v-show="ruleTypes3Flag == 2">
														<el-input v-model="item.value1Str" type="text" size="small"
															controls-position="right" style="width:90px"></el-input>
														与
														<el-input v-model="item.value2Str" type="text" size="small"
															controls-position="right" style="width:90px"></el-input>
														之间
													</span>
													<el-link v-show="!tagsEditable"
														@click="removeOrderEventRule(form.tagsLevelList[currentTagsLevel].userActions[index].eventItems, itemIndex)"
														type="primary" style="padding-left:20px;font-size:18px"
														icon="el-icon-remove"></el-link>
												</el-row>
												<el-row class="el-row-mode" style="margin-top: 6px;">
													<el-cascader class="line-item" size="small"
														v-model="form.tagsLevelList[currentTagsLevel].userActions[index].eventMethod"
														:options="allEventItemMethodOpts[form.tagsLevelList[currentTagsLevel].userActions[index].eventType.id]"
														:props="{ expandTrigger: 'hover', multiple: false }"
														@change="selectItemMethod(formItem, indexA)"></el-cascader>
													<el-select class="line-item" size="small"
														v-model="form.tagsLevelList[currentTagsLevel].userActions[index].eventItemExpression"
														style="width:120px"
														@change="eventPropertyChange(funnelRuleType[index], index)">
														<el-option v-for="dict in eventPropertysOptions['02']"
															:key="dict.eventItemCode" :label="dict.eventItemExpression"
															:value="dict.eventItemCode" />
													</el-select>
													<el-input size="small"
														v-model="form.tagsLevelList[currentTagsLevel].userActions[index].value1Str"
														type="text" controls-position="right" style="width:100px"
														v-show="ruleTypes3Flag == 1"></el-input>
													<span v-show="ruleTypes3Flag == 2">
														<el-input size="small"
															v-model="form.tagsLevelList[currentTagsLevel].userActions[index].value1Str"
															type="text" controls-position="right" style="width:90px">
														</el-input>与
														<el-input size="small"
															v-model="form.tagsLevelList[currentTagsLevel].userActions[index].value2Str"
															type="text" controls-position="right" style="width:90px">
														</el-input>之间
													</span>
												</el-row>
											</div>
										</el-form-item>
									</el-row>
								</div>
							</div>

							<div class="itemContent">
								<div class="content-header"><i class="el-icon-plus"></i>行为序列
									<el-link type="primary" :underline="false" v-show="!tagsEditable"
										style="padding-left:20px;float:right;display: inline-block;"
										@click="addActionOrders">
										<i class="el-icon-plus"></i> <span class="innerContent">筛选</span>
									</el-link>
								</div>
								<div class="contentLine" :style="{ height: orderHeight }"
									v-show="form.tagsLevelList[currentTagsLevel].userActionOrders.length > 1">
									<span @click="changeOrderExpressionFun">{{ form.orderStr }}</span>
								</div>
								<div class="contentProperties" id="divActionOrders">
									<el-row v-show="form.tagsLevelList[currentTagsLevel].userActionOrders.length > 0">
										<el-form-item label="" style="display: block;padding-left:10px;"
											label-width="0px">
											<div style="margin-top: 10px;"
												v-for="(v, index) in form.tagsLevelList[currentTagsLevel].userActionOrders">
												<span class="indexButton">{{ indexOptions[index] }}</span>
												<el-date-picker
													v-model="form.tagsLevelList[currentTagsLevel].userActionOrders[index].dataRange"
													size="small" style="width: 240px" value-format="yyyy-MM-dd"
													type="daterange" range-separator="-" :picker-options="pickerOptions"
													start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
												依次做过
												<el-link type="primary" :underline="false" style="padding-left:20px;"
													v-show="!tagsEditable"
													@click="addActionOrderEventItem(form.tagsLevelList[currentTagsLevel].userActionOrders[index].eventItems, index)">
													<i class="el-icon-plus"></i>添加筛选
												</el-link>
												<el-link type="primary" :underline="false" v-show="!tagsEditable"
													style="padding-left:20px;font-size:18px"
													@click="removeActionOrderRule(form.tagsLevelList[currentTagsLevel].userActionOrders, index)">
													<i class="el-icon-remove"></i>
												</el-link>
												<el-row style="margin-top: 6px;" class="el-row-mode"
													v-for="(item, itemIndex) in form.tagsLevelList[currentTagsLevel].userActionOrders[index].eventItems">
													<span class="secondButton">{{ indexOptions[index] + '' + (itemIndex
													+ 1)
													}}</span>
													<el-select v-model="item.eventId" style="width:120px"
														class="line-item" size="small"
														@change="eventTypeChange(funnelRuleType, index)">
														<el-option v-for="dict in eventTypeOptions" :key="dict.id"
															:label="dict.eventTypeName" :value="dict.id" />
													</el-select>
													<el-select v-model="item.eventItem" style="width:120px"
														class="line-item" size="small" value-key="id">
														<el-option v-for="dict in allEventItemListOpts[item.eventId]"
															:key="dict.id" :label="dict.eventItemName" :value="dict" />
													</el-select>
													<el-select v-model="item.eventItemExpression" style="width:120px"
														class="line-item" size="small"
														@change="eventPropertyChange(funnelRuleType[index], index)">
														<el-option
															v-for="dict in eventPropertysOptions[item.eventItem.valueType]"
															:key="dict.eventItemCode" :label="dict.eventItemExpression"
															:value="dict.eventItemCode" />
													</el-select>
													<el-input v-model="item.value1Str" type="text" class="line-item"
														size="small" controls-position="right" style="width:100px"
														v-show="ruleTypes3Flag == 1"></el-input>
													<span v-show="ruleTypes3Flag == 2">
														<el-input v-model="item.value1Str" type="text" size="small"
															controls-position="right" style="width:90px"></el-input>
														与
														<el-input v-model="item.value2Str" type="text" size="small"
															controls-position="right" style="width:90px"></el-input>
														之间
													</span>

													<el-link v-show="!tagsEditable"
														@click="removeOrderEventRule(form.tagsLevelList[currentTagsLevel].userActionOrders[index].eventItems, itemIndex)"
														type="primary" style="padding-left:20px;font-size:18px"
														icon="el-icon-remove"></el-link>

												</el-row>
											</div>

										</el-form-item>
									</el-row>
								</div>
							</div>
						</div>

						<el-form-item label="预估人数" style="margin-top:20px;padding-left:10px;" v-show="!tagsEditable">
							<el-select v-model="form.prevNumber">
								<el-option label="按全量计算" value="1" />
								<el-option label="按1/2抽样计算" value="2" />
								<el-option label="按1/4抽样计算" value="4" />
								<el-option label="按1/8抽样计算" value="8" />
								<el-option label="按1/16抽样计算" value="16" />
								<el-option label="按1/32抽样计算" value="32" />
								<el-option label="按1/64抽样计算" value="64" />
							</el-select>
							<el-button type="primary" @click="preSummaryFun">预估</el-button>
							<span class="caclResult">{{ calcGroupNum }}</span>
						</el-form-item>

						<el-form-item label="限制人数" label-position="top" style="margin-top:20px;padding-left:10px;"
							v-show="!tagsEditable">
							<el-checkbox v-model="form.limitNumberFlag">限制人群返回数量</el-checkbox>
						</el-form-item>

						<el-form-item label="  按  " v-show="form.limitNumberFlag && !tagsEditable">
							<el-select v-model="form.limitType">
								<el-option label="随机" value="1" />
								<el-option label="属性" value="2" />
							</el-select>
							<el-select v-model="form.limitUserAttribute" v-show="form.limitType === '2'"
								style="width:100px">
								<el-option v-for="dict in userPropertysOptions" :key="dict.eventItemCode"
									:label="dict.eventItemExpression" :value="dict.eventItemCode" />
							</el-select>
							<el-select v-model="form.sortType" v-show="form.limitType === '2'" style="width:100px">
								<el-option label="数值从大到小" value="1" />
								<el-option label="数值从小到达" value="2" />
							</el-select>
							返回
							<el-input-number v-model="form.limitNumber" :controls="false" style="width:80px">
							</el-input-number>
							人
						</el-form-item>

					</el-card>
				</el-form>

			</el-main>
			<el-footer height="80px">
				<el-col :span="1.5">
					<el-button @click="handleClose">取 消</el-button>
				</el-col>

				<el-col :span="1.5" style="float: right;padding-left:10px">
					<el-button type="primary" @click="changeSteps" v-show="!tagsEditable || active != 1">{{ active === 1
					?
					'创 建' : '下一步'
					}}</el-button>
				</el-col>
				<el-col :span="1.5" style="float: right">
					<el-button type="primary" @click="prevSteps" v-show="active === 1">上一步</el-button>
				</el-col>
			</el-footer>
		</el-drawer>
	</div>
</template>

<script>
import EventVBarChart from "@/views/base/group/comments/EventVBarChart";
import EventBarChart from "@/views/base/group/comments/EventBarChart";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
	addGroup,
	addUserGroup,
	calcUserGroupNumber,
	delGroup,
	getGroup,
	getGroupHistoryData,
	listGroupUserDetail,
	updateGroup
} from "@/api/base/group";
import {
	allEventItemsOptions,
	eventTypeOptions
} from "@/api/config/item";
import {
	listAllPropertyResult,
	listPropertyByType
} from "@/api/config/property";
import {
	getAllEventMethodResult
} from "@/api/config/emethod";
import {
	getUserAttributeList
} from "@/api/config/userattribute";
import {
	treeselect
} from "@/api/system/dept";
import {
	addUserTags, getTagParentSelect, getTagsByType,
	getTagTreeSelect, listUsertagsDetail, listUsertagsInfo
} from "@/api/tags/tag";
import { listType } from "@/api/tags/type";

export default {
	name: "userTags",
	components: {
		EventVBarChart,
		EventBarChart,
		Treeselect
	},
	data() {

		return {
			// 遮罩层
			tagsEditable: false,
			drawer: false,
			loading: true,
			open: false,
			total: 0,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				name: undefined,
				updateType: '',
				status: '',
				onlyMe: '',
				lastCalcStatus: '',
				buildType: '',
				tagsName: '',
				displayName: ''
			},
			chartTitle: [],
			chartData: {},
			tableData: [],
			activeName: 'first',
			// 更新方式字典
			updateTypeOptions: [],
			// 预估类型字典
			reckonTypeOptions: [],
			// 运行状态字典
			statusOptions: [],
			// 最后计算状态字典
			lastCalcStatusOptions: [],
			// 创建方式字典
			buildTypeOptions: [],
			tagsTypeOptions: {},
			tagsParentOptions: {},
			rules: {
				name: {
					required: true,
					message: '请输入标签名称',
					trigger: 'blur'
				}
			},
			props: {
				label: 'label',
				children: 'children',
				isLeaf: 'leaf'
			},
			// 表单参数
			currentSelectTagsId: undefined,
			currentTagsInfo: {},
			currentTagsLevel: 0,
			form: {
				name: '',
				tagsLevelList: [{
					tagsLevel: 1,
					levelName: '分层1',
					levelDescription: '分层1',
					userAttributes: [],
					userActions: [],
					userActionOrders: []
				},
				{
					tagsLevel: 2,
					levelName: '分层2',
					levelDescription: '分层2',
					userAttributes: [],
					userActions: [],
					userActionOrders: []
				},
				{
					tagsLevel: 3,
					levelName: '分层3',
					levelDescription: '分层3',
					userAttributes: [],
					userActions: [],
					userActionOrders: []
				}
				],
				limitNumberFlag: false,
				limitType: '1',
				resultNum: 0,
				buildType: '01',
				globalStr: '且',
				attributeStr: '且',
				actionStr: '且',
				orderStr: '且',
			},
			active: 0,
			ruleTypes3Flag: 0,
			userPropertysOptions: [],
			userAttributeOptions: [],
			eventItemMethosOpts: [],
			allEventItemListOpts: {},
			eventPropertysOptions: {},
			allEventItemMethodOpts: {},
			childHeight: 0,
			actionChildHeight: 0,
			globalHeight: '186px',
			height: '0px',
			actionHeight: '0px',
			orderHeight: '0px',
			eventTypeOptions: [],
			indexOptions: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
				'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
			],
			calcGroupNum: ''
		};
	},
	created() {
		this.getEventTypeList();
		this.getAllEventItemsList();
		this.getUserAttributeList();
		this.getTreeselect();
		this.getTagParent();
		this.getDicts("sys_update_type").then(response => {
			this.updateTypeOptions = response.data;
		});
		this.getDicts("sys_normal_disable").then(response => {
			this.reckonTypeOptions = response.data;
		});
		this.getDicts("sys_run_status_type").then(response => {
			this.statusOptions = response.data;
		});
		this.getDicts("sys_calc_status_type").then(response => {
			this.lastCalcStatusOptions = response.data;
		});
		this.getDicts("sys_build_type").then(response => {
			this.buildTypeOptions = response.data;
		});
	},
	methods: {
		handleNodeClick(data) {
			if (data.type === 'tags') {
				return false;
			}
			if (data.type === 'type') {
				listType({ parentId: data.id }).then(response => {
					let childTags = response.data;
					if (!data.children) {
						this.$set(data, 'children', []);
					}
					childTags.forEach(type => {
						const index = data.children.findIndex(v => v.id === type.id);
						if (index < 0) {
							const newChild = { id: type.id, label: type.typeName, type: 'type' };
							data.children.push(newChild);
						}
					});
				});
			}
			getTagsByType(data.id).then(response => {
				let childTags = response.data;
				if (!data.children) {
					this.$set(data, 'children', []);
				}
				childTags.forEach(tag => {
					const index = data.children.findIndex(v => v.id === tag.id)
					if (index < 0) {
						const newChild = { id: tag.id, label: tag.displayName, type: 'tags', leaf: true };
						data.children.push(newChild);
					}
				});
			});
		},
		handleTagNodeClick(data) {
			if (data.type === 'type') {
				return false;
			}
			if (data.type === 'tags') {
				this.currentSelectTagsId = data.id;
				this.getUserTagsChart();
			}
		},
		getUserTagsChart() {
			this.loading = true;
			listUsertagsDetail(this.currentSelectTagsId).then(response => {
				this.chartTitle = response.data.chartTitle;
				this.chartData = response.data.chartData;
				this.tableData = response.data.tableData;
				this.currentTagsInfo = response.data.tagsInfo;
				this.loading = false;
			});
		},
		getList() {
			this.loading = true;
			listGroupUserDetail(this.queryParams).then(response => {
				this.groupList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		/** 查询部门下拉树结构 */
		getTreeselect() {
			getTagTreeSelect().then(response => {
				this.tagsTypeOptions = response.data;
			});
		},
		getTagParent() {
			getTagParentSelect().then(response => {
				this.tagsParentOptions = response.data;
			});
		},
		addUserTags() {
			this.tagsEditable = false;
			this.open = true;
			this.reset();
		},
		createUserTags(type) {
			this.open = false;
			if (type === '01') {
				this.currentTagsLevel = 0;
				this.drawer = true;
			} else {
				this.msgSuccess("功能还未完成，敬请期待！");
			}
		},
		getEventTypeList() {
			var param = {
				status: 'Y'
			};
			eventTypeOptions(param).then(response => {
				this.eventTypeOptions = response.data;
			});
		},
		getAllEventItemsList() {
			allEventItemsOptions().then(response => {
				this.allEventItemListOpts = response.data;
			});
			listAllPropertyResult().then(response => {
				this.eventPropertysOptions = response.data;
			});
			getAllEventMethodResult().then(response => {
				this.allEventItemMethodOpts = response.data;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				name: '',
				tagsLevelList: [
					{
						tagsLevel: 1,
						levelName: '分层1',
						levelDescription: '分层1',
						userAttributes: [],
						userActions: [],
						userActionOrders: []
					},
					{
						tagsLevel: 2,
						levelName: '分层2',
						levelDescription: '分层2',
						userAttributes: [],
						userActions: [],
						userActionOrders: []
					},
					{
						tagsLevel: 3,
						levelName: '分层3',
						levelDescription: '分层3',
						userAttributes: [],
						userActions: [],
						userActionOrders: []
					}
				],
				limitNumberFlag: false,
				limitType: '1',
				resultNum: 0,
				buildType: '01',
				globalStr: '且',
				attributeStr: '且',
				actionStr: '且',
				orderStr: '且'
			};
			this.childHeight = 0;
			this.actionChildHeight = 0;
			this.globalHeight = '186px';
			this.height = '0px';
			this.actionHeight = '0px';
			this.orderHeight = '0px';
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},

		/** 提交按钮 */
		submitForm: function () {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.form.id != undefined) {
						updateGroup(this.form).then(response => {
							if (response.code === 200) {
								this.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							} else {
								this.msgError(response.msg);
							}
						});
					} else {
						addGroup(this.form).then(response => {
							if (response.code === 200) {
								this.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							} else {
								this.msgError(response.msg);
							}
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			this.msgSuccess("功能还未完成，敬请期待！");
			return;
			const ids = row.id || this.ids;
			this.$confirm('是否确认删除用户标签编号为"' + ids + '"的数据项?', "警告", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(function () {
				return delGroup(ids);
			}).then(() => {
				this.getList();
				this.msgSuccess("删除成功");
			}).catch(function () { });
		},


		getUserAttributeList() {
			var param = {
				status: 'Y'
			};
			getUserAttributeList(param).then(response => {
				this.userAttributeOptions = response.data;
			});
		},

		userAttributeChangeFun(array, index) {
			array[index].valueExpression = '';
			array[index].value1Str = '';
			array[index].value2Str = '';
			listPropertyByType({
				valueType: array[index].dataType
			}).then(response => {
				this.userPropertysOptions = response.data;
			});
		},

		eventPropertyChange(obj, index) {
			if (obj.eventItemExpression == 'between') {
				this.ruleTypes3Flag = 2;
			} else {
				this.ruleTypes3Flag = 1;
			}
		},

		addUserAttribute() {
			let userAttribute = {
				attributeName: '',
				attributeRemark: '',
				valueExpression: '',
				dataType: '',
				valueType: '',
				value1Str: '',
				value2Str: '',
			};
			this.form.tagsLevelList[this.currentTagsLevel].userAttributes.push(userAttribute);
			this.getGlobalHeight();
		},

		addUserActions() {
			let userAction = {
				dataRange: [],
				eventItems: [],
				doThings: '',
				eventType: {}
			};
			this.form.tagsLevelList[this.currentTagsLevel].userActions.push(userAction);
			this.getGlobalHeight();
		},

		addActionOrders() {
			let actionOrder = {
				dataRange: [],
				eventItems: []
			};
			this.form.tagsLevelList[this.currentTagsLevel].userActionOrders.push(actionOrder);
			this.getGlobalHeight();
		},

		getGlobalHeight() {
			this.$nextTick(() => {
				let height = parseInt(this.getDocumentHeight('divContentProperties')) - 10
				let actionHeight = parseInt(this.getDocumentHeight('divContentActions')) - 10
				let orderHeight = parseInt(this.getDocumentHeight('divActionOrders')) - 10
				let globalHeight = height + actionHeight + orderHeight + 186 + 30
				// let height1 = h1.substring(0, h1.indexOf('px'));
				// let height2 = h2.substring(0, h2.indexOf('px'));
				// let height3 = h3.substring(0, h3.indexOf('px'));
				this.height = height + 'px'
				this.actionHeight = actionHeight + 'px'
				this.orderHeight = orderHeight + 'px'
				this.globalHeight = globalHeight + 'px'
			})
		},

		getDocumentHeight(id) {
			let div = document.getElementById(id);
			let height = window.getComputedStyle(div).getPropertyValue('height');
			return height;
		},

		removeRule(array, index) {
			array.splice(index, 1);
			this.getGlobalHeight();
		},
		removeActionRule(array, index) {
			array.splice(index, 1);
			this.getGlobalHeight();
		},
		removeActionOrderRule(array, index) {
			array.splice(index, 1);
			this.getGlobalHeight();
		},

		setDivHeight() {
			let height = this.getDocumentHeight('divContentProperties');

		},

		handleClose() {
			this.drawer = false;
		},

		buildUserGroup() {
			this.open = false;
			this.drawer = true;
			this.form.buildType = '01';
		},

		prevSteps() {
			this.active = 0;
		},
		changeSteps() {
			if (this.active < 2) {
				this.active++;
			}
			if (this.active === 2) {
				this.active = 1;
				let requestJson = JSON.stringify(this.form);
				addUserTags({
					requestJson: requestJson
				}).then(response => {
					if (response.code === 200) {
						this.msgSuccess("新增成功");
						this.drawer = false;
						this.getList();
					} else {
						this.msgError(response.msg);
					}
				});
			}

		},
		globalChangeExpressionFun() {
			this.form.globalStr = this.form.globalStr === '且' ? '或' : '且';
		},
		changeExpressionFun() {
			this.form.attributeStr = this.form.attributeStr === '且' ? '或' : '且';
		},

		changeActionExpressionFun() {
			this.form.actionStr = this.form.actionStr === '且' ? '或' : '且';
		},
		changeOrderExpressionFun() {
			this.form.orderStr = this.form.orderStr === '且' ? '或' : '且';
		},

		addActionEventItem(itemArray) {
			let eventItem = {
				eventItem: {},
				eventItemExpression: '',
				valueType: '',
				value1Str: '',
				value2Str: '',
			};
			itemArray.push(eventItem);
			let height = this.getDocumentHeight('divContentActions');
			this.actionHeight = height;
			let ch = height.substring(0, height.indexOf('px'));
			this.actionChildHeight = parseFloat(ch);
			this.getGlobalHeight();
		},

		addActionOrderEventItem(itemArray) {
			let eventItem = {
				eventId: '',
				eventItem: {},
				eventItemExpression: '',
				valueType: '',
				value1Str: '',
				value2Str: '',
			};
			itemArray.push(eventItem);
			let height = this.getDocumentHeight('divActionOrders');
			this.orderHeight = height;
			let ch = height.substring(0, height.indexOf('px'));
			this.childHeight = parseFloat(ch);
			this.getGlobalHeight();
		},

		removeOrderEventRule(itemArray, index) {
			itemArray.splice(index, 1);
			this.getGlobalHeight();
		},

		preSummaryFun() {
			this.form.name = 'user_group_' + this.form.name;
			let requestJson = JSON.stringify(this.form);
			calcUserGroupNumber({
				requestJson: requestJson
			}).then(response => {
				if (response.code === 200) {
					let num = response.data;
					if (num) {
						this.form.resultNum = num;
						this.calcGroupNum = num + ' 人';
					} else {
						this.calcGroupNum = '所选范围内，没有符合该条件的用户';
					}
				} else {
					this.msgError(response.msg);
				}
			});
		},

		tagsLevelChangeFun(tagsLevel) {
			this.currentTagsLevel = tagsLevel;
		},
		addUserTagsLevelFun() {
			let num = this.form.tagsLevelList.length
			let tagsLevel = {
				tagsLevel: (num + 1),
				levelName: '分层' + (num + 1),
				levelDescription: '分层' + (num + 1),
				userAttributes: [],
				userActions: [],
				userActionOrders: []
			};
			this.form.tagsLevelList.push(tagsLevel);
		},
		shwoTagsRuleFun() {
			if (this.currentSelectTagsId == undefined) {
				this.msgError("请先选择标签！");
				return;
			}
			listUsertagsInfo(this.currentSelectTagsId).then(response => {
				this.form = JSON.parse(response.data.tagsRule);
				this.tagsEditable = true;
				this.drawer = true;
			});
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.content-container {
	width: 100%;
	overflow-y: auto;
	padding: 0 40px;
	background: #f7f9fa;
	display: flex;
	flex-direction: column;

	.content-left {
		height: 590px;
		padding: 20px 14px 12px;
		background-color: #fff;
	}

	.content-right {
		//background-color: #fff;
	}
}

.index__profile-item___2Ep7n {
	margin-top: 20px;
	border-bottom: 1px solid #d3dce6;
	padding-top: 6px;
	padding-left: 10px;
}

.index__content___3xrWj {
	flex: 1;
	margin-left: 18px;
	overflow-y: hidden;
	margin-bottom: 40px;

	.index__model_tags___1-PXC {
		background-color: #fff;
		margin-bottom: 18px;
		padding: 20px 20px 5px;
		overflow: hidden;

		.run-head {
			display: flex;
			align-items: center;
			line-height: 1.8;
			font-size: 13px;
			color: #707f96;
		}

		.index__title___3y483 {
			margin-top: 14px;
			margin-bottom: 3px;
			font-size: 20px;
			color: #1f2d3d;
			font-weight: 600;
			max-width: 700px;
		}

		.index__editable___1GyWU {
			margin-top: 14px;
		}

		.index__3eMlg {
			max-width: 700px;
			color: #283a52;
			font-size: 13px;
			background-color: #f5f8fc;
			border-radius: 18px;
			line-height: 21px;
			padding: 6px 14px;
			margin-top: 10px;
			display: inline-flex;
			align-items: center;
			justify-content: space-between;
			cursor: pointer;

			.rulter__right {
				margin-left: 5px;
				margin-right: 5px;
				font-size: 18px;
				line-height: 21px;
			}
		}
	}

	.index__all_tags___3HoCH {
		background-color: #fff;
		padding: 20px 20px 5px;
		overflow: hidden;
	}
}

.labelTit {
	.el-input__inner {
		padding: 0;
		border: 0;
		width: 90px;
		font-weight: bold;
	}

	.el-input__suffix {
		right: 0;
		background-color: #fff;
		display: flex;
	}
}

.index__title___3e4ql {
	color: #1f2d3d;
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	margin-bottom: 8px;
}

.index__desc___D3hEk {
	font-size: 14px;
	font-weight: 400;
	color: #8492a6;
	line-height: 20px;
}

.el-tree-node__label {
	cursor: pointer;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	color: #475669;
	height: 30px;
	padding: 0 10px;
	border-radius: 16px;
}

.content-query {
	padding-top: 15px;
}

.tag-class {
	padding-left: 6px;
	padding-right: 6px;
	box-sizing: border-box;

	.index__item___1dPAz {
		padding: 20px 16px;
		min-height: 118px;
		box-shadow: 2px 0 7px 0 rgb(153 170 192 / 17%);
		border: 1px solid transparent;
		border-radius: 3px;
		display: flex;
		transition: border-color .3s;

		img {
			height: 56px;
			margin-right: 12px;
			margin-top: 24px;
		}

		h4 {
			font-size: 18px;
			color: #233347;
			margin-bottom: 4px;
		}

		p {
			margin-bottom: 0;
			font-size: 13px;
			color: #909cb1;
			line-height: 20px;
		}
	}

	.index__item___1dPAz:hover {
		border: 1px solid #04cb94;
	}
}

.el-steps-mode-page-usertag {
	display: flex;
	justify-content: center;
}

.page-group-tags {

	.user-filter {
		position: relative;
	}

	.itemContent {
		border: 1px solid #e0e6ed;
		padding: 10px 10px;
		// height: auto;
		margin-left: 30px;
		border-radius: 3px;
		margin-bottom: 15px;
		position: relative;

		.content-header {
			height: 30px;
			line-height: 30px;
		}

	}

	.contentLine {
		position: absolute;
		width: 2px;
		left: 18px;
		background-color: #d6efe8;
		top: 50px;
	}

	.contentLine>span {
		position: relative;
		display: block;
		top: 50%;
		left: -12px;
		right: 0;
		width: auto;
		min-width: 25px;
		height: 25px;
		transform: translateY(-50%);
		border-radius: 3px;
		background: #d6efe8;
		color: #00d166;
		font-size: 14px;
		font-weight: 700;
		line-height: 25px;
		text-align: center;
		cursor: pointer;
		user-select: none;
	}

	.contentProperties {
		margin-left: 20px;
		width: 99%;

		.el-form-item {
			margin-bottom: 0px;
		}
	}

	.el-drawer {
		overflow: scroll
	}

	.linkId {
		color: #559ff0;
		text-decoration: none;
		background-color: transparent;
		outline: none;
		cursor: pointer;
		transition: color .3s;
	}

	.caclResult {
		margin-left: 10px;
		color: #475669;
		font-size: 14px;
		line-height: 25px;
		font-weight: bold;
	}

	.indexButton {
		display: inline-block;
		background: #2dca93;
		color: #fff;
		width: 20px;
		height: 20px;
		border-radius: 2px;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		position: relative;
		margin-right: 14px;
	}

	.secondButton {
		width: 22px;
		height: 22px;
		line-height: 22px;
		background: #f5faff;
		border-radius: 3px;
		border: 1px solid #d3dce6;
		font-size: 12px;
		color: #99a9bf;
		margin-right: 8px;
	}

	.box-card {
		color: #606266;
		font-size: 14px;

		.el-card__body {
			position: relative;
		}
	}

	.rule-name-container {
		display: flex;
		flex-flow: row wrap;

		.name-item {
			position: relative;
			width: 100px;
			height: 32px;
			margin: 0 16px 16px 0;
			border: 1px solid #fff;
			box-shadow: 0 1px 6px rgb(31 45 61 / 12%);
			border-radius: 16px;
			padding: 0 20px 0 16px;
			line-height: 32px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			cursor: pointer;
			user-select: none;
			text-align: center;
		}
	}

	.active {
		border: 1px solid #147df0;
		color: #147df0;
	}



	.el-drawer-mode {
		min-width: 905px;
	}

	.el-row-mode {
		margin-left: 34px;
	}

	.line-item {
		margin-right: 10px;
	}

	.little-line-item {
		margin-right: 6px;
	}
}
</style>
